<template>
  <div class="list">
    <h2>任务列表</h2>
    <div class="tasklist"  v-if="$store.state.taskName.length">
        <div :class="{ active: item.status==true }" class="content" v-for="(item,index) in $store.state.taskName" :key="index" >
            <input type="checkbox" @click="changeStatus(item)">
            <span>{{item.id}}</span>
            <span>{{item.taskname}}</span>
            <span @click="delet(item)">删除</span>
        </div>
    </div>
    <div class="empty" v-else>
        暂无任务
    </div>
  </div>
</template>

<script>
export default {
    methods:{
        changeStatus(item){
            this.$store.commit('modifyStatus',item)
        },
        delet(item){
            this.$store.commit('deleteTask',item)
        }
    },
    // 阻止修改vuex数据刷新丢失
      created () {
    //判断是否有store这个本地存储的数据
    if (sessionStorage.getItem("store") ) {
      // 如果有  那么把vuex的数据替换  把当前的state  和上次刷新存储的state合并起来
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
        sessionStorage.removeItem("store")
    } 
 
    // 在页面监听绑定一个beforeunload事件（页面刷新事件）
    // 当页面刷新的时候使用本地存储存一个store的数据  把vuex的数据全部取出来 转成字符串存起来
    window.addEventListener("beforeunload",()=>{
        sessionStorage.setItem("store",JSON.stringify(this.$store.state))
    })
  }
}
</script>

<style lang="scss" scoped>
.list{
    h2{
        font-size: 16px;
        margin: 15px 0;
    }
    .tasklist{
        .content{
            background-color: red;
            box-sizing: border-box;
            padding: 5px 10px;
            color: white;
            font-size: 14px;
            margin-bottom: 10px;
            span:nth-child(2){
                margin: 0 10px;
            }
            span:last-child{
                float: right;
            }
        }
        // 切换变色注意css权重
        .active{
            background-color: lightseagreen;
        }
    }
    .empty{
        text-align: center;
        font-weight: bold;
        font-size: 20px;
        margin-top: 50px;
    }
}


</style>